<template>
  <div class="app-container">
    <!--查询表单-->
  <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
           <!-- 条件查询 -->
            <el-col :span="8">
              <el-form-item label="项目名称">
                <el-input style="width: 90%" v-model="searchObj.chargeItemName" placeholder="请输入" clearable></el-input>
              </el-form-item>
           </el-col>
          
           <!-- 项目类型选择 -->
            <el-col :span="8" >
               <el-form-item label="选择项目类型" label-width="100px">
                   <template>
               <el-select v-model="searchObj.type" placeholder="请选择" style="width: 100%;">
                   <el-option
                   v-for="item in typeOptions"
                   :key="item.id"
                   :label="item.value"
                   :value="item.id">
                   </el-option>
               </el-select>
               </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <!-- 缴费状态选择 -->
            <el-col :span="8" >
               <el-form-item label="选择缴费状态" label-width="97px">
                   <template>
               <el-select v-model="searchObj.status" placeholder="请选择" style="width: 89%;">
                   <el-option
                   v-for="item in statusOptions"
                   :key="item.id"
                   :label="item.value"
                   :value="item.id">
                   </el-option>
               </el-select>
               </template>
              </el-form-item>
            </el-col>
             <!-- 项目类型选择 -->
             <el-col :span="8" >
               <el-form-item label="选择小区" label-width="70px">
                   <template>
               <el-select v-model="searchObj.community_id" placeholder="请选择" filterable style="width: 100%;">
                   <el-option
                   v-for="item in communityList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
                   </el-option>
               </el-select>
               </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="display:flex">
            <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
          </el-row>
        </el-form>
      </div>
  
          <!-- 工具条 -->
  <div class="tools-div-right">
    <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
  </div>
  
      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        border
        style="width: 100%;margin-top: 10px;">
  
        <el-table-column
          label="序号"
          width="70"
          align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <el-table-column prop="param.community_name" label="小区名称" />
        <!-- <el-table-column prop="code" label="收费编号" /> -->
        <el-table-column prop="param.charge_items_name" label="项目名称" />
        <el-table-column prop="type" label="收费类型" >
         <template slot-scope="scope">
           <el-popover
           placement="right-end"
           :close-delay="0"
           :open-delay="0"
           width="200"
           trigger="hover">
           <p v-if="scope.row.type==0">如:水电费、物业费等</p>
           <p v-if="scope.row.type==1">如:临时停车等</p>
           <p v-if="scope.row.type==2">条件符合,可退还</p>
           <p v-if="scope.row.type==3">缴纳费用可自动扣除</p>
           <el-tag type="primary" slot="reference" v-if="scope.row.type==0">常规收费</el-tag>
           <el-tag type="danger" slot="reference" v-if="scope.row.type==1">临时收费</el-tag>
           <el-tag type="warning" slot="reference" v-if="scope.row.type==2">押金收费</el-tag>
           <el-tag type="success" slot="reference" v-if="scope.row.type==3">预缴纳</el-tag>
         </el-popover>
          </template>
           </el-table-column>
           <el-table-column prop="contractor" label="承办人" />
        <el-table-column prop="telephone" label="承办人电话" />
        <el-table-column prop="isRet" label="可退费" >
          <template slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.isRet==1" style="color: rgb(14, 243, 14);"></i>
            <i class="el-icon-error" v-if="scope.row.isRet==0" style="color: red;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.status==0">待缴费</el-tag>
            <el-tag type="success" v-if="scope.row.status==1">已缴费</el-tag>
            <el-tag type="danger" v-if="scope.row.status==2">待退费</el-tag>
            <el-tag type="success" v-if="scope.row.status==3">已退费</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="payMoney" label="应收金额" />
        <el-table-column prop="actualMoney" label="实收金额" />
        <el-table-column prop="payTime" label="缴费时间" width="160"/>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/> -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeItemById(scope.row.id)" title="删除"/>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
        <el-form ref="dataForm" :model="chargeItem" label-width="150px" size="small" style="padding-right: 40px;">
          
          <!-- 所属小区  选择 -->
          <el-form-item label="所属小区">
         <template>
         <el-select v-model="chargeItem.communityId" placeholder="未选择" filterable>
           <el-option
             v-for="item in communityList"
             :key="item.id"
             :label="item.name"
             :value="item.id">
           </el-option>
         </el-select>
       </template>
       </el-form-item>
         <!-- 收费类型 -->

          <el-form-item label="收费类型" >
         <el-radio-group v-model="chargeItem.type" size="medium" >
           <el-radio-button :label="0" >常规收费</el-radio-button>
           <el-radio-button :label="1" >临时收费</el-radio-button>
           <el-radio-button :label="2" >押金收费</el-radio-button>
           <el-radio-button :label="3" >预缴纳</el-radio-button>
         </el-radio-group>

         

          </el-form-item>
          <el-form-item label="收费编号" v-if="chargeItem.id">
            <el-input v-model="chargeItem.code" disabled/>
          </el-form-item>
          <el-form-item label="项目名称" >
            <el-input v-model="chargeItem.name" />
          </el-form-item>
          <el-form-item label="金额">
            <el-input v-model="chargeItem.money"/>
          </el-form-item>
         
          <!-- 类别选择 -- 单选框 -->
          <!-- 备注 -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
          <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
        </span>
  </el-dialog>
  


             <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

      </div>
</template>

<script>
  import comApi from '@/api/sysCommunity/community'
  import detApi from '@/api/sysCharge/detail'
export default {
   data(){
     return {
           //搜索选择 --项目类型
           typeOptions:[
               {
                   id:0,
                   value:'常规收费'
               },
               {
                   id:1,
                   value:'临时收费'
               },
               {
                   id:2,
                   value:'押金收费'
               },
               {
                   id:3,
                   value:'预缴纳'
               },
           ],
            //缴费状态 --选择
           statusOptions:[
           {
                   id:0,
                   value:'待缴费'
               },
               {
                   id:1,
                   value:'已缴费'
               },
               {
                   id:2,
                   value:'待退费'
               },
               {
                   id:3,
                   value:'已退费'
               },
          ],
            //小区列表
         communityList:[],

         listLoading:true,
         list:[],
         total:0,
         page:1,
         limit:3,
         searchObj:{},
         liveTime:'',
         chargeItem:{},
         dialogVisible : false,

      
     }
   },

   created(){
     this.fetchData();
     this.fetchCommunityList()
   },
   methods:{
     //查询所有小区 放入选择框
     fetchCommunityList(){
         comApi.finAllCommunity().then(res=>{
           this.communityList = res.data
          //  console.log(res.data)
         })
     },
     //查询项目列表
     fetchData(page=1){
       this.listLoading=true;
       this.page = page;
       detApi.getPageList(this.page,this.limit,this.searchObj).then(res=>{
         console.log(res)
         this.list = res.data.records
         this.total = res.data.total
         //关闭加载图标
         this.listLoading = false;
       })
     },
     //重置按钮
     resetData(){
       this.searchObj={}
       this.fetchData();
     },
     //添加按钮
     add(){
       this.chargeItem={}
       this.openDialog();
     },
     edit(id){
       itemApi.getItemById(id).then(res=>{
         // console.log(res);
         this.chargeItem = res.data;
         //打开弹框
         this.openDialog();
       })
     },
     //
     saveOrUpdate(){
         if(this.chargeItem.id){
           //修改
           this.updateItem(); 
         }else{
           this.addItem();
         }
     },
     //修改收费项目
     updateItem(){
       itemApi.updateItemById(this.chargeItem).then(res=>{
        //给出提示 成功则刷新列表
        this.tips(res.code==200,'修改收费项目')
       
       //关闭弹框
       this.dialogVisible = false;
       })
     },
     //添加收费项目
     addItem(){
       itemApi.addItem(this.chargeItem).then(res=>{
         //给出提示
         this.tips(res.code==200,'添加收费项目')
       
       //关闭弹框
       this.dialogVisible = false;
       })
     },
     //删除项目
     removeItemById(id){
       this.$confirm('确定删除该收费项吗', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         // 点击确定
         itemApi.removeItemById(id).then(res=>{
             // 1.给出提示
             this.tips(res.code==200,'删除收费项')
             
         })
       })
       },

     //提示
     tips(flag,msg){
       if(flag){
         //给出提示
         this.$notify({
           message: msg+'成功',
           type: 'success'
         });
         this.listLoading = true;
         //2. 再次刷新数据列表
         this.fetchData()
       }else{
         //给出提示
         this.$notify({
           message: msg+'失败',
           type: 'danger'
         });
       }
       
     },
     openDialog(){
       this.fetchCommunityList()
       //获取编码
       // this.getItemCode()
       this.dialogVisible = true;
     },
   }
}
</script>

<style>

</style>